<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>基础配置</el-breadcrumb-item>
      <el-breadcrumb-item>环境管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片-->
    <el-card class="box-card">
      <el-row :gutter="20">
        <!--搜索框-->
        <el-col :span="6">
          <el-input placeholder="请输入环境名称" v-model="queryParams.name" clearable @clear="getEnvironmentList" @keyup.enter.native="getEnvironmentList">
            <el-button slot="append" icon="el-icon-search" @click="getEnvironmentList" class="search"></el-button>
          </el-input>
        </el-col>
        <!--创建按钮-->
        <el-col :span="4">
          <el-button type="primary" @click="openAddEnvironmentDialog" plain>创建环境</el-button>
        </el-col>
      </el-row>
      <!--表格-->
      <el-table :data="environmentList" :cell-style="cellStyle" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="环境名称" prop="name"></el-table-column>
        <el-table-column label="环境地址" prop="url"></el-table-column>
        <el-table-column label="环境描述" prop="description"></el-table-column>
        <el-table-column label="创建时间" prop="create_time"></el-table-column>
        <el-table-column label="操作" min-width="130px">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="openEditEnvironmentDialog(scope.row)" plain>编 辑</el-button>
            <el-button type="danger" size="mini" @click="deleteThisEnvironment(scope.row.id)" plain>删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.p"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="queryParams.s"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!--新建环境对话框-->
    <el-dialog title="创建环境" :visible.sync="addEnvironmentDialogVisible" width="40%" :append-to-body="true"
               :close-on-click-modal="false" :close-on-press-escape="false" @close="addDialogClose">
      <!--环境表单-->
      <el-form :model="addEnvironmentForm" status-icon :rules="addEnvironmentRule" ref="addEnvironmentRef" label-width="90px">
        <el-form-item label="环境名称" prop="name">
          <el-input v-model="addEnvironmentForm.name" placeholder="请输入环境名称"></el-input>
        </el-form-item>
        <el-form-item label="环境地址" prop="url">
          <el-input v-model="addEnvironmentForm.url" placeholder="请输入环境地址"></el-input>
        </el-form-item>
        <el-form-item label="环境描述" prop="description">
          <el-input type="textarea" v-model="addEnvironmentForm.description" placeholder="请输入环境描述"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="addEnvironmentDialogClose">取 消</el-button>
          <el-button type="primary" @click="addEnvironment">确 定</el-button>
        </span>
    </el-dialog>
    <!--编辑环境对话框-->
    <el-dialog title="编辑环境" :visible.sync="editEnvironmentDialogVisible" width="40%" :append-to-body="true"
               :close-on-click-modal="false" :close-on-press-escape="false" @close="editDialogClose">
      <!--环境表单-->
      <el-form :model="editEnvironmentForm" status-icon :rules="editEnvironmentRule" ref="editEnvironmentRef" label-width="90px">
        <el-form-item label="环境名称" prop="name">
          <el-input v-model="editEnvironmentForm.name" placeholder="请输入环境名称"></el-input>
        </el-form-item>
        <el-form-item label="环境地址" prop="url">
          <el-input v-model="editEnvironmentForm.url" placeholder="请输入环境地址"></el-input>
        </el-form-item>
        <el-form-item label="环境描述" prop="description">
          <el-input type="textarea" v-model="editEnvironmentForm.description" placeholder="请输入环境描述"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editEnvironmentDialogClose">取 消</el-button>
        <el-button type="primary" @click="editThisEnvironment">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getEnvironments, createEnvironment, editEnvironment, deleteEnvironment } from '../../api/api'

export default {
  created () {
    this.getEnvironmentList()
  },
  data () {
    return {
      queryParams: {
        p: 1,
        s: 10,
        name: ''
      },
      tmpName: '',
      environmentList: [],
      addEnvironmentForm: {
        name: '',
        url: '',
        description: '',
        create_time: ''
      },
      total: 0,
      addEnvironmentDialogVisible: false,
      environmentId: '',
      addEnvironmentRule: {
        name: [
          { required: true, message: '环境名称不能为空！', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符！', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '环境地址不能为空！', trigger: 'blur' },
          { min: 14, max: 100, message: '长度在 14 到 100 个字符！', trigger: 'blur' }
        ]
      },
      editEnvironmentDialogVisible: false,
      editEnvironmentForm: {},
      editEnvironmentRule: {
        name: [
          { required: true, message: '环境名称不能为空！', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符！', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '环境地址不能为空！', trigger: 'blur' },
          { min: 14, max: 100, message: '长度在 14 到 100 个字符！', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取环境列表
    getEnvironmentList () {
      if (this.queryParams.name !== this.tmpName) {
        this.tmpName = this.queryParams.name
        this.queryParams.p = 1
      }
      getEnvironments(this.queryParams).then(response => {
        if (response.data.code !== 0) return this.$message.error('获取环境列表失败！')
        this.environmentList = response.data.data.results
        this.total = response.data.data.count
      })
    },
    // 打开创建环境对话框
    openAddEnvironmentDialog () {
      this.addEnvironmentDialogVisible = true
    },
    // 创建环境
    addEnvironment () {
      this.$refs.addEnvironmentRef.validate(valid => {
        if (!valid) return
        createEnvironment(this.addEnvironmentForm).then(response => {
          if (response.data.code !== 0) return this.$message.error('创建环境失败！')
          this.$message.success('创建环境成功！')
          this.addEnvironmentDialogClose()
          this.getEnvironmentList()
        })
      })
    },
    // 创建对话框关闭
    addDialogClose () {
      this.$refs.addEnvironmentRef.resetFields()
      this.addEnvironmentForm = {
        name: '',
        url: '',
        description: '',
        create_time: ''
      }
    },
    // 创建环境对话框关闭
    addEnvironmentDialogClose () {
      this.addEnvironmentDialogVisible = false
      this.addDialogClose()
    },
    // 打开编辑环境对话框
    openEditEnvironmentDialog (environmentInfo) {
      this.editEnvironmentForm = { ...environmentInfo }
      this.environmentId = this.editEnvironmentForm.id
      delete this.editEnvironmentForm.id
      delete this.editEnvironmentForm.create_time
      this.editEnvironmentDialogVisible = true
    },
    // 编辑环境
    editThisEnvironment () {
      this.$refs.editEnvironmentRef.validate(valid => {
        if (!valid) return
        editEnvironment(this.environmentId, this.editEnvironmentForm).then(response => {
          if (response.data.code !== 0) return this.$message.error('编辑环境失败！')
          this.$message.success('编辑环境成功！')
          this.editEnvironmentDialogClose()
          this.getEnvironmentList()
        })
      })
    },
    // 编辑对话框关闭
    editDialogClose () {
      this.$refs.editEnvironmentRef.resetFields()
    },
    // 编辑环境对话框关闭
    editEnvironmentDialogClose () {
      this.editEnvironmentDialogVisible = false
      this.editDialogClose()
    },
    // 删除这个环境
    deleteThisEnvironment (environmentId) {
      this.$confirm('此操作将永久删除该环境, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteEnvironment(environmentId).then(response => {
          if (response.data.code !== 0) return this.$message.error('删除环境失败！')
          this.$message.success('删除环境成功！')
          this.total -= 1
          if (this.total === (this.queryParams.p - 1) * this.queryParams.s && this.total !== 0) {
            this.queryParams.p -= 1
          }
          this.getEnvironmentList()
        })
      }).catch(err => err)
    },
    // 监听size变化
    handleSizeChange (newSize) {
      this.queryParams.s = newSize
      this.getEnvironmentList()
    },
    // 监听页码变化
    handleCurrentChange (newPage) {
      this.queryParams.p = newPage
      this.getEnvironmentList()
    },
    // 表格样式
    cellStyle (data) {
      if (data.column.label === '环境名称') {
        return 'color: #409EFF'
      }
    }
  }
}
</script>

<style lang="less" scoped>
  /deep/ .el-dialog__body {
    padding: 20px 35px 10px 20px;
  }
</style>
